<template>
  <div>
    <div>
      <van-nav-bar
        left-text="手机号设置"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="main">
      <div class="tel_info">
        <p class="info_title">当前绑定邮箱账号</p>
        <p class="tel">{{ $store.state.emailLogin[0].email }}</p>
      </div>
      <div class="bottom_btn">
        <van-button
          @click="Modifyemail"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
        >
          {{ btnText }}
        </van-button>
        <van-button @click="goBack" type="default">返回</van-button>
      </div>
    </div>
    <div v-if="popupBox">
      <van-popup
        v-model="show"
        round
        :close-on-click-overlay="false"
        position="bottom"
        :style="{ height: '40%' }"
      >
        <div>
          <van-icon class="colse" @click="popupclose" size="25" name="close" />
        </div>
        <van-form class="formemai" @submit="onSubmit">
          <van-field
            v-model="emailInfo.email"
            name="邮箱"
            label="新邮箱"
            placeholder="输入您的新邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
          />
          <van-field
            v-model="sms"
            center
            clearable
            label="邮箱验证码"
            placeholder="请输入邮箱验证码"
            :rules="[{ required: true, message: '请输入邮箱验证码' }]"
          >
            <template #button>
              <van-button
                native-type="button"
                size="small"
                @click="sendEmail"
                type="primary"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      btnText: "修改邮箱",
      email: "1963164244@qq.com",
      show: false,
      popupBox: false,
      emailInfo: {
        email: "",
        content: "",
        title: "",
      },
      sms: "",
      newSms: "",
    };
  },
  methods: {
    Modifyemail() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      setTimeout(() => {
        this.$toast.clear();
        this.popupBox = true;
        this.show = true;
      }, 1200);
    },
    onSubmit() {
      this.$toast.loading({
        message: "验证中...",
        forbidClick: true,
      });
      setTimeout(() => {
        if (this.sms != this.newSms) {
          this.$toast("验证码不正确！");
        } else {
          this.ModifTheMailbox();
        }
      }, 1200);
    },
    async ModifTheMailbox() {
      const { data: res } = await this.$http.post("ModifTheMailbox", {
        email: this.emailInfo.email,
        id: this.$store.state.emailLogin[0].userID,
      });
      if (res.status === 200) {
        this.$toast("修改成功！");
        this.LoginFailed();
      }
      console.log(res);
    },
    // 修改成功当前登录失效
    LoginFailed() {
      setTimeout(() => {
        window.localStorage.removeItem("TOKEN_EMAIL");
        this.$toast("登录失效，请重新登录！");
        this.popupBox = false;
        this.show = false;
        this.emailInfo.email = "";
        this.sms = "";
        this.$router.push("/login");
      }, 1000);
    },
    //发送邮箱验证码
    async sendEmail() {
      this.emailInfo.content = "您正在修改邮箱";
      this.emailInfo.title = "修改邮箱";

      const { data: res } = await this.$http.get("mailbox", {
        params: this.emailInfo,
      });
      this.newSms = res.code;
      //   console.log(res.code);
    },
    popupclose() {
      this.$dialog
        .confirm({
          message: "确认取消修改吗？",
        })
        .then(() => {
          this.show = false;
          this.popupBox = false;
        })
        .catch(() => {
          // on cancel
        });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
.tel_info {
  margin: 30px auto;
  width: 150px;
  text-align: center;
  .info_title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;
  }
  .tel {
    line-height: 35px;
    font-size: 19px;
    font-weight: 600;
    margin-left: -30px;
  }
}
.bottom_btn {
  width: 250px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  button {
    margin: 10px 0;
  }
}
.colse {
  top: 10px;
  left: 10px;
}
.formemai {
  margin-top: 20px;
}
</style>